<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>圣杯布局</title>
	<style>
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

header {
	width: 100%;
	height: 60px;
	background: rgba(11, 220, 239, .773);
	line-height: 60px;
}

main {
	display: grid;
	width: 100%;
	height: calc(100vh - 160px);
	background: #ccc;

	grid-template-columns: 300px 1fr 200px;
	grid-template-rows: 1fr;
}

.left {
	background: turquoise;
}

.right {
	background: rgb(77, 14, 222);
}

footer {
	width: 100%;
	height: 100px;
	background: rgba(0, 0, 0, .704);
	color: #fff;
}

	</style>
</head>

<body>
	<header>
		头部
		<a href="https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html">CSS Grid 网格布局教程</a>
	</header>
	<main>
		<div class="left">
			左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏左边栏
		</div>
		<div class="container">
			中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间
		</div>
		<div class="right">
			右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右
		</div>
	</main>
	<footer>
		底部
	</footer>
</body>

</html>